<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
          <blockquote class="layui-elem-quote">欢迎管理员：
            <span class="x-red">{$layout_login_user.username}</span>！ 
            您于 <span class="x-red">{$layout_login_user.expiration_date|date='Y-m-d'}</span> 到期
          </blockquote>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">数据统计</div>
        <div class="layui-card-body ">
          <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
            <li class="layui-col-md2 layui-col-xs6">
              <a href="javascript:;" class="x-admin-backlog-body">
                <h3>逾期未处理</h3>
                <p>
                  <cite>{$house_info.overdue_todo}</cite></p>
              </a>
            </li>
            <li class="layui-col-md2 layui-col-xs6">
              <a href="javascript:;" class="x-admin-backlog-body">
                <h3>逾期未收</h3>
                <p>
                  <cite>{$house_info.overdue_uncollected}</cite></p>
              </a>
            </li>
            <li class="layui-col-md2 layui-col-xs6 ">
              <a href="javascript:;" class="x-admin-backlog-body">
                <h3>闲置</h3>
                <p>
                  <cite>{$house_info.empty_count}</cite></p>
              </a>
            </li>
            <li class="layui-col-md2 layui-col-xs6 ">
              <a href="javascript:;" class="x-admin-backlog-body">
                <h3>入住率</h3>
                <p>
                  <cite>{$house_info.occupancy}</cite></p>
              </a>
            </li>
            <li class="layui-col-md2 layui-col-xs6">
              <a href="javascript:;" class="x-admin-backlog-body">
                <h3>总楼栋</h3>
                <p>
                  <cite>{$house_info.property_count}</cite></p>
              </a>
            </li>
            <li class="layui-col-md2 layui-col-xs6">
              <a href="javascript:;" class="x-admin-backlog-body">
                <h3>总房间</h3>
                <p>
                  <cite>{$house_info.number_count}</cite></p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="layui-col-md3">
      <div class="layui-card" style="height:330px;">
        <div class="layui-card-header">本月资产总览</div>
        <div class="layui-card-body ">
          <table class="layui-table">
            <tbody>
              <tr>
                <th style="text-align:center;">应收</th>
                <td>{$finance_info.receivable}</td>
              </tr>
              <tr>
                <th style="text-align:center;">已收</th>
                <td>{$finance_info.income}</td>
              </tr>
              <tr>
                <th style="text-align:center;">已付</th>
                <td>{$finance_info.spending}</td>
              </tr>
              <tr>
                <th style="text-align:center;">实际利润</th>
                <td>{$finance_info.profits}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="layui-col-md9">
      <div class="layui-card">
        <div class="layui-card-body ">
          <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
          <div id="main" style="width: 100%;height:310px;"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

<script src="__CDN__/echarts/echarts.min.js"></script>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));

  // 指定图表的配置项和数据
  option = {
    title: {
      text: '年度财务收支走势',
      textStyle: {
        color: '#333333',
        fontWeight: 'normal',
        fontSize: 15,
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      x: 'right', // 'center' | 'left' | {number}, 
      y: 'top', // 'center' | 'bottom' | {number} 
      data: ['收入', '支出', '利润']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '收入',
        type: 'line',
        data: []
      },
      {
        name: '支出',
        type: 'line',
        data: []
      },
      {
        name: '利润',
        type: 'line',
        data: []
      }
    ]
  };

  $.get('./echar.html').done(function (data) {
    // 填入数据
    myChart.setOption({
      xAxis: {
        data: data.categories
      },
      series: [
        {
          // 根据名字对应到相应的系列
          name: '收入',
          data: data.data.income
        }, {
          name: '支出',
          data: data.data.spending
        }, {
          name: '利润',
          data: data.data.profits
        }
      ]
    });
  });

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>